<template>
  <el-dialog
    title="导入表"
    :close-on-click-modal="false"
    v-model="isShow"
    width="1000px"
    @close="close"
  >
    <el-form ref="rulesForm" :model="queryParams" label-width="80px">
      <div class="search-form">
      <el-form-item label="表名称">
        <el-input v-model="queryParams.tableName" clearable />
      </el-form-item>
      <el-form-item label="表表述">
        <el-input v-model="queryParams.tableComment" clearable />
      </el-form-item>
      <el-button style="margin-left: 20px" type="primary" @click="search">搜索</el-button>
    </div>
    </el-form>
    <el-table @row-click="clickRow" ref="table" :data="dataList" @selection-change="handleSelectionChange" height="260px">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="tableName" label="表名称" :show-overflow-tooltip="true"/>
      <el-table-column prop="tableComment" label="表描述" :show-overflow-tooltip="true"/>
      <el-table-column prop="createTime" label="创建时间" :formatter="dateFormat"/>
      <el-table-column prop="updateTime" label="更新时间" :formatter="dateFormat"/>
    </el-table>
    <el-pagination
      background
      v-show="total>0"
      :current-page="queryParams.pageNum"
      :page-size="queryParams.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { toRefs, ref, watch, defineComponent, reactive } from 'vue'
import { useStore } from 'vuex'
import dialog from '@/mixins/dialog'
import { ElMessage } from 'element-plus'
import { StateType as GenCodeStateType, GenTable } from '@/store/modules/system/genCode'
import tableList, { BaseQueryType, BaseDataType } from '@/mixins/tableList'

interface QueryParamsType extends BaseQueryType {
  tableName: string;
  tableComment: string;
}

interface DataType extends BaseDataType<GenTable> {
  selectList: Array<GenTable>;
  queryParams: QueryParamsType;
}

export default defineComponent({
  name: 'ImportTable',
  emits: ['onRefresh', 'close'], // this line
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  setup(props, context) {
    const store = useStore<{genCode: GenCodeStateType}>()
    const table = ref<HTMLElement>()
    const { dialogM } = dialog(props, context)
    const data = reactive<DataType>({
      url: 'genCode/getDBList',
      selectList: [],
      dataList: [],
      queryParams: {
        tableName: '',
        tableComment: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0
    })
    const {
      dateFormat,
      handleSelectionChange,
      handleCurrentChange,
      search
    } = tableList(data)
    search.value()
    const submit = async () => {
      const list = data.selectList.map(item => item.tableName)
      if (!list.length) {
        ElMessage({
          message: '请选择要导入的表',
          type: 'error'
        })
      } else {
        const res = await store.dispatch('genCode/importTable', list)
        ElMessage({
          message: res.msg,
          type: 'success'
        })
        if (res.code === 200) {
          context.emit('onRefresh')
          dialogM.close()
        }
      }
    }
    watch(() => props.value, (val) => {
      if (!val) {
        data.queryParams = {
          tableName: '',
          tableComment: '',
          pageNum: 1,
          pageSize: 10
        }
      }
    })
    const clickRow = (row: GenTable) => {
      (table.value as any).toggleRowSelection(row)
    }
    return {
      table,
      clickRow,
      submit,
      dateFormat,
      handleSelectionChange,
      handleCurrentChange,
      search,
      ...toRefs(dialogM),
      ...toRefs(data)
    }
  }
})
</script>
